@font-face {
	font-family: "Inconsolata";
	font-style: normal;
	font-weight: normal;
	src: local("Inconsolata"), url("Inconsolata.ttf") format("truetype");
}

body {
	margin: 0px;
	background-color: black;
	font-family: Inconsolata;
	overflow: hidden;
}

canvas {
	display: block;
	margin: auto;
}

#status {
	text-align: center;
	color: white;
	margin: 0px;
	padding: 0.5em 1em;
}

#status .money {
	float: left;
	color: gold;
}

#status .zombies {
	float: right;
	color: red;
}

#share {
	display: none;
}

#dialog {
	position: absolute;
	background-color: black;
	color: white;
	padding: 15px;
	box-shadow: 0px 0px 3px 3px white;
	
	-moz-transition: -moz-transform 500ms, opacity 500ms;
	-o-transition: -o-transform 500ms, opacity 500ms;
	-webkit-transition: -webkit-transform 500ms, opacity 500ms;
	transition: transform 500ms, opacity 500ms;
}

#dialog.items {
	width: 50%;
}

#dialog.welcome {
	width: 70%;
}

#dialog.gameover {
	text-align: center;
}

#dialog #share {
	display: block;
}

#dialog #share span { 
	vertical-align: top; 
}

#dialog #copyright {
	font-size: 70%;
	margin-top: 3em;
	font-family: georgia, serif;
}

#dialog #copyright a {
	color: gold;
}

#dialog h2 {
	margin: 0px 0px 5px 0px;
	text-align: center;
}

#dialog #version {
	font-size: 50%;
	opacity: 0.5;
}

#dialog table {
	width: 100%;
	border-collapse: collapse;
	color: white;
}

#dialog td {
	padding: 3px;
}

#dialog table thead td {
	font-weight: bold;
	border-bottom: 1px solid white;
}

#dialog table tbody td:first-child, #dialog table td:last-child {
	text-align: center;
}

#dialog table tfoot td {
	padding-top: 10px;
	border-top: 1px solid white;
}

#dialog.hidden {
	opacity: 0;
}

#dialog.hidden-0 {}

#dialog.hidden-1 {
	-moz-transform: rotate(270deg) scale(0);
	-webkit-transform: rotate(270deg) scale(0);
	-o-transform: rotate(270deg) scale(0);
	transform: rotate(270deg) scale(0);
}

#dialog.hidden-2 {
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}

#dialog.hidden-3 {
	-moz-transform: scale(0, 1);
	-webkit-transform: scale(0, 1);
	-o-transform: scale(0, 1);
	transform: scale(0, 1);
}

#dialog.hidden-4 {
	-moz-transform: scale(1, 0);
	-webkit-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
}

#audio {
	text-align: center;
	position: fixed;
	background-color: white;
	opacity: 0.8;
	border-radius: 0px 0px 0px 30px;
	padding: 0.4em 1em;

	-moz-transition: all 500ms;
	-o-transition: all 500ms;
	-webkit-transition: all 500ms;
	transition: all 500ms;
}

#audio input {
	vertical-align: middle;
}

#audio #controls {
	margin: 0.4em 0em;
	font-size: 150%;
}

#audio #controls span {
	cursor: pointer;
	margin: 1em;
	color: #555;
}

#audio #controls span:hover {
	color: #000;
}

#audio #note {
	position: absolute;
	left: 9px;
	bottom: 5px;
	font-size: 150%;
}
